<template>
  <div class="page">
    <div class="navBar">
      <customNavBar
        :left-tetx="leftTetx"
        :title-test="titleTest"
        :H5="true" @goBack="goBack"
      ></customNavBar>
    </div>
    <!-- 页面内容 -->
    <div class="content background-image-div">
      <div class="codetop"></div>
      <div class="codeBg">
        <div id="myCanvd">
          <div style="width: 100%; display: flex; justify-content: center;">
            <img class="z" src="../../assets/z.png" alt="">
          </div>
          <!-- <div class="topCardTitle">检视任务邀请二维码已生成</div> -->
          <qrcode-vue
            id="myCanvas"
            style="margin: auto;"
            :value="v"
            :level="'L'"
            :foreground="color"
          />
        </div>
        <div class="bottomCardTitle" v-if="route.query.isShow">
          本次保单检视服务二维码已生成，您可直接邀请客户进行扫描，也可向客户分享链接或二维码。<br/>
        </div>
        <div class="bottomCardTitle" v-else>本次保单检视二维码已生成，您可直接邀请客户扫描该二维码进入保单检视服务流程。</div>
        <div class="bottomCardTitleSecond">
         此链接有效期为<span style="color:#FF9926;font-size: 26px;padding:0 4px">
            {{ data.expirationTime }}
         </span>天，失效后需重新创建。
            <!--  <span v-if="route.query.isShow != '1'">天，失效后需重新创建。</span>  -->
        </div>
        <div class='dash' >
          <img src="../../assets/img/features/dashedLine.png" alt="">
        </div>
        <div v-if="+data.expirationTime  >= 1" class='bottomButstop' @click="goShare()" v-log-button-name="'保单检视_新客邀请分享_分享'">分享</div>
        <div class="bottomButs">
          <!-- 按钮在默认情况下为行内块级元素，通过 block 属性可以将按钮的元素类型设置为块级元素。 -->
          <button v-if="+data.expirationTime  >= 1" class="leftBut" @click="copyUseClipboard(data.shortUrl)" v-log-button-name="'保单检视_新客邀请分享_复制链接'">复制链接</button>
          <div v-if="+data.expirationTime  >= 1" class="rightBut" @click="downLoad()" v-log-button-name="'保单检视_新客邀请分享_下载二维码'">下载二维码</div>
        </div>
        <div v-if="+data.expirationTime  == 0" class="bottomButs">二维码已失效</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="addCustomers">
import { useRouter, useRoute } from "vue-router";
import { Toast } from "/@/utils/Message";
import { onMounted } from "vue";
import { ref, reactive } from "vue";
import useClipboard from "vue-clipboard3";
import customNavBar from "/src/components/NavBar/customNavBar.vue"
//二维码
import html2canvas from 'html2canvas'
import QrcodeVue from "qrcode.vue";
import { Console } from "console";
import * as rebNtiveBrige  from "../../request/reb_native_brige.ts"

const leftTetx = ref("");
const titleTest = ref("");
const router = useRouter()
const v = ref<string>("");
const color = ref<string>("#000000");
const number = ref<string>("5");

const route = useRoute();
let data = reactive({
   ...route.query
});
const textValue = ref<string>('');
const { toClipboard } = useClipboard();
const copyUseClipboard = async (val:any) => {
  try {
    textValue.value = val
    await toClipboard(textValue.value); 
    Toast("复制成功");
  } catch (e:any) {
    Toast(e);
  }
};
const gotop = () => {
  if (data.isTask) {
     router.go(-1)
  } else {
    router.push('workTable')
  }
 
}
const goShare = () => {
  // data.shortUrl
  router.push({ path: '/reportshare', query: { shortUrl: data.shortUrl} })
}
const divContainer = ref(null);
const imageBase64 = ref('');
const downloadBase64Img = (base64URL:string,fileName:string) => {  
	  // 创建a标签，用于触发下载  
	  const a = document.createElement('a');  
	  // 将 a 标签的 download 属性设置为要下载的文件名  
	  a.download = fileName || 'image';  
	  // 创建 Blob 对象，并获取 base64 数据的 MIME 类型  
	  const mimeType = base64URL.match(/:(.*?);/)[1];  
	  // 将 base64 数据转换为字节数组  
	  const byteCharacters = atob(base64URL.split(',')[1]);  
	  const byteNumbers = new Array(byteCharacters.length);  
	  // 将字节数组填充到 Uint8Array 中  
	  for (let i = 0; i < byteCharacters.length; i++) {  
	    byteNumbers[i] = byteCharacters.charCodeAt(i);  
	  }  
	  const byteArray = new Uint8Array(byteNumbers);  
	  // 创建 Blob 对象  
	  const blob = new Blob([byteArray], {type: mimeType});  
	  // 将 Blob 对象的 URL 赋值给 a 标签的 href 属性  
	  a.href = URL.createObjectURL(blob);  
	  // 将a标签暂时添加到 body 中，触发下载  
	  document.body.appendChild(a);  
	  a.click();  
	  // 下载完成后，将 a 标签从 body 中移除  
	  document.body.removeChild(a);  
}
const downLoad = async () => {
  // console.log(window.deviceUtils)
  // window.deviceUtils.downloadQR(data.shortUrl, '保单检视')
  const ICBCName  = navigator.userAgent.includes("ICBC-AXA-REB") || navigator.userAgent.includes("ICBC-AXA-EBT")
    if(ICBCName) {
      const canvas = await html2canvas(document.getElementById('myCanvd'));
      imageBase64.value = canvas.toDataURL("image/png");
      (window as any).deviceUtils.downloadQR(imageBase64.value, '保单检视' )
    } else {
      try {
          const canvas = await html2canvas(document.getElementById('myCanvd'));
          imageBase64.value = canvas.toDataURL("image/png");
          let imgUrl = canvas.toDataURL('image/png')
          downloadBase64Img(imgUrl,'客户邀请二维码')
          // const a = document.createElement('a')
          // a.href = imgUrl
          // a.setAttribute('download','客户邀请二维码.png')
          // a.click()
          // a.remove(); // 下载之后把创建的元素删除
      } catch (error) {
          console.error('捕获出错:', error);
      }
    }
}
const goBack = () => {
  router.go(-1)
}
onMounted(() => {
    v.value = data.longUrl as any
    // v.value = 'https://172.20.14.114/policyReviewH5/letterAdvce?taskCode=11111'
});
</script>

<!-- less嵌套设置 -->
<style lang="less" scoped>
.page {
  // background-color: #deecf6;
  width: 100vw;
  height: 100vh;
  user-select:auto!important;
  :deep(.van-nav-bar) {
    margin-top: 10px;
    margin-left: 10px;
  }
  .content {
    background-color: #deecf6;
    height: calc( 100% - 68px);
    width: 100%;
    margin: 0 auto;
    // margin-top: 50px;
    padding-top: 40px;
      background: url("/src/assets/img/features/erweimabg.png");
      background-size: 100% 100%;
    .contentg {
      width: 26px;
      height: 26px;
      color: #000;
      transform: rotate(90deg);
   
    }
    .dash {
      padding-top: 19px;
      padding-left: 10px;
      width:108%;
      img {
        width: 90%;
        height: 1px;
      }
    }
    .cetjecsty {
      font-size: 19px;
      color: #143766;
      font-weight: 500;
    }
    .codetop{
      width: 160px;
      height: 30px;
      margin-top: 0 auto;
      margin: 0 auto;
      background: url("/src/assets/img/features/erweimatext.png");
      background-size: 100% 100%;
    }
    .codeBg {
      width: 85%;
      max-width: 360px;
      overflow: hidden;
      margin: 0 auto;
      margin-top: 22px;
      //height: 1.18*100vw;
      background: url("/src/assets/img/features/codeBg.png");
      background-size: 100% 100%;
      .z {
        width: 130px;
        height: 23px;
        margin-top: 10px;
      }
      .topCardTitle {
        padding-top: 38px;
        font-size: 14px;
        font-weight: 250;
        color: #222222;
        line-height: 22px;
      }

      .bottomCardTitle {
        width: 80%;
        font-size: 14px;
        margin-left: 10%;
        padding-top: 10px;
        padding-bottom: 13px;
        text-align: left;
      }

      .bottomCardTitleSecond {
        width: 80%;
        color:#FF9926;
        font-size: 14px;
        margin-left: 10%;
        padding-top: 5px;
        // border-bottom: rgb(163, 224, 248) 1px dashed ;
        text-align: left;
      }

      .bottomButstop {
        max-width: 500px;
        width: 90%;
        height: 50px;
        color: #FFFFFF;
        margin: auto;
        margin-top: 10px;
        margin-left: 23px;
        line-height: 47px;
        background: url("/src/assets/img/tast/bottom.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .bottomButs {
        max-width: 500px;
        display: flex;
        margin: 0 auto;
        margin-top: 10px;
        margin-bottom: 30px;
        justify-content: center;
        .leftBut {
          width: 45%;
          height: 43px;
          line-height: 43px;
          background: url("/src/assets/img/tast/xyb.png");
          background-size: 100% 100%;
          border: none;
          color: #198AFA;
          font-size: 14px;
        }

        .rightBut {
          width: 45%;
          height: 43px;
          line-height: 43px;
          background: url("/src/assets/img/tast/xyb.png");
          background-size: 100% 100%;
          border: none;
          color: #198AFA;
          font-size: 14px;
          margin-bottom: 5px;
        }
      }
    }
  }
}
:deep(#myCanvas){
    width: 52vw !important;
    height: 52vw !important;
    margin-top: 10px !important;
  @media (min-width: 600px) {
    width: 38vw !important;
    height: 38vw !important;
    margin-top: 30px !important;
  }
}
</style>

<!-- 
    二维码	仅展示
    复制链接	按钮
    下载二维码	按钮 

    1、根据添加的客户信息生成对于该客户的检视任务邀请二维码和邀请链接，二维码和链接有效期为7天，有效期支持可配置。
    2、打开二维码/链接时，系统判断任务状态，
    当任务状态为：已创建、已查看告知页、已授权认证、已确认保单范围时，打开后跳转到告知信页面；
    当任务状态为：报告生成中 ，打开后跳转到报告生成中页面；
    当任务状态为：已生成报告 ，打开后跳转到告知信（查看报告）页面。通过此告知信查看报告详情时，如果从业人员进行过解锁详版操作，则展示详版报告，否则按添加客户是选择的报告类型展示。
    3、点击复制链接按钮，可将链接复制。
       点击下载二维码，可将二维码保存到相册。

-->

